<template>
  <el-menu class="menu" :style="style" 
    active-text-color="#5465CF" 
    :collapse="isCollapse" 
    :router="true">
     <div v-for="(item,index) in list" :key="item.title">
        <el-sub-menu v-if="item.children" :index="index">
          <template #title>
            <el-icon>
              <component :is="item.icon"></component>
            </el-icon>
            {{item.title}}</template>
          <el-menu-item 
            v-for="(content,i) in item.children" 
            :key="content.title" 
            :index="index + '_' +  i" :route="content.path">
            <template #title>
              <el-icon>
                <component :is="content.icon"></component>
              </el-icon>
              {{content.title}}
              </template>
          </el-menu-item>
        </el-sub-menu>
        <el-menu-item v-else :index="index" :route="item.path">
          <el-icon>
              <component :is="item.icon"></component>
            </el-icon>
          <template #title>{{item.title}}</template>
        </el-menu-item>
      </div>
  </el-menu>
</template>

<script>
export default {
  props: {
    list: {
      type: Array,
      required: true
    },
    style: {
      type: Object
    },
    isCollapse: {
      type: Boolean,
      defalut: false
    }
  }
}
</script>
<style lang="less" scoped>
.menu.el-menu--collapse{
  /deep/
    .el-sub-menu__icon-arrow{
      display: none;
    }
    .el-icon:not(.el-sub-menu__icon-arrow){
      translate: -20px;
    }
}
</style>

